Compliance | Fiona MacNeill | Macknowlogist

Striving for accessibility - Eval pt 1

Thu, 19 Jan 2017 00:00:00 +0000

Part 1 of my final evaluation. This entry outlines key decisions that I made regarding accessibility towards the end of the development period. I am writing and publishing it retroactively as it as represents a very large amount of thinking and work, which I kept notes about as I went along.

Based on observation

Based on looking at a large number of NHS and governmental sites, referenced in former posts I realise that accessibility is crucial, perhaps even more than your average portfolio site. For example, looking at NHS England (2017) site I see that they offer a text-to-speech service. Based on experience in my day-job working with software vendors, some of these solutions can be quite expensive. It was however important to me to make the site as accessible as possible and that has meant some sacrifices along the way.

Keystone texts

While engaging in this in-depth investigation into the accessibility, I found myself referring to the following keystone texts.

- UX accessibility specialists an amazing resource
- a frequent go-to of mine

I feel like I have only scratched the surface with the WAI-ARIA roles, but based on testing I feel that the site is accessible as I could get it within the allotted time. In the end I found a blog post on the subject by a rather brilliant developer, Aaron Krauss (2016) who did a great job of how to practically use certain ARIA labels and roles. What I did find is that there is quite a lot of redundancy in the code, but you need to have it there as the screenreader doesn’t necessarily pick up the semantics in the page construction as you might intend. Here is a video of my screenreader testing in action with tab key only - tabindex (Mozilla Developer Network, 2017)

What the font?

I conducted some reading (Nielsen, 2002; Martin, 2009; Franz, 2014; ) around legible fonts and font sizes and optimal line height. I have tried my best to work with the best practices, although that does get tricky with the mobile screen size. However, the attention that I have paid to optimising the CSS stylesheet for plain readers should help those who use accessibility features on mobile devices. Added a fix to the superscript I found a very helpful snippet for fixing line height for superscript (used for references) and subscript. Thank you to the -ever helpful- CSS Tricks site (Coyier, 2009a). Contrast As much as I loved the white headers along the timeline the contrast was not sufficient. The colour scheme is themed around blues and purples and unfortunately white on blue doesn’t comply with WCAG 2.0 unless the blue shade is very dark or the white font is very large (Snook, 2015; WAVE, n.d.).

The accordion had to go

Upon testing the tab-key only navigation I realised that there was no accessible way (that I could muster anyway) to navigate the accordion (Mary Lou, 2012) and for that reason it had to go. I added two simple tables, which I was trying to avoid, but as they area features comparisons this use us permissible. I was not using the tables for layout, but for the display of information in a standardised way. After the fact I found this accordion example at codepen.io which might have been better, but not without a lot of work:

Sprite fun

I got my sprite on and added sprites for the device images. The device images were drawings that I created in Adobe Illustrator based on photographs. All the photos were apart from the image of jeans, which I have listed below. This was added as an image through the CSS and aria-labelled for descriptive purposes.

The complete sprite for the devices in all of its glory. Photograph used as the basis for illustration of fasten/clip wearable - by is licensed under CC0 images sources from Pixabay:

Fixing the tab svg

I replaced the svg tab to be a proper thing rather than the Frankenstein’s monster-like CSS creation . Once again I referred to the excellent CSS-Tricks (Coyier, 2013) and Mozilla Developer Network resources (2016c), as well as the Implementing Responsive Design book from the reading list (Kadlec, 2012).

Asking myself questions

I tried my best to standardise all the units in the CSS although if I were to do it all again with hindsight I think that I might design my grid to work with ems or rems (once they are widely compatible or older browsers fall out of use). I’m sure that I have missed things in spite of several thorough read-throughs. It all validated okay. CSS code block structure: e.g. div class or id - this resembles the layout of a div .div { display: block; position: relative; width: 90% height: 60% color: #000; margin: 2% auto 2% auto padding: 2% 4%; (shortenings used where possible) } e.g. typography class or id - this resembles the layout h2 { font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; text-align: center; font-size: 1.5em; line-height: 1.25; font-weight: 300; } In the HTML where white-space pre-line formatting was needed for the Goals and the references sections, I included comments to help indicate why the formatting was different in the markup. Also regarding the CSS as I was going through it, to weed it a bit, I asked myself a series of questions to help determine which units to use and such. I have included these below.

Is it text? = ems
If it moves it is em or %. If it doesn’t or cannot move it is pixels
Is it in a column in the grid - then margins and padding are percentages (unless there is a very good reason for them not to be)
Is it in the grid - then margins and padding are percentages
Is it used in the html? No, then get rid of it Could it be consolidated in any way? Does it share the same values as another class and/or id?I would have liked to do more on this, but I ran out of time. Did my best to do it as I went along.
Does it need to be a negative value (particularly in the media queries)? Then it is in ems.

Rationale:

When it is something that needs to have set dimensions such as a button, I am using pixels.
For text I am using ems to ensure compatibility with older browsers
For table related items and blocks which reside in divs I have used percentages.
Used hexadecimal shortenings when it made sense to do so and it did not change the hue of the colour (three digits rather than the standard 6). I prefer digits rather than word descriptions, due to colour precision.

Media queries

Did a lot of work on these, again I found the Implementing Responsive Design (Kadlec, 2012) and the Introducing HTML 5 (Lawson & Sharp, 2011) books particularly helpful. I also added a arrow keys image and tooltip to help explain the navigation of the timeline. You will notice for the tabbed navigation of the site in the screen reader demo that the timeline is skipped over initially and I added to the JavaScript in order to allow the tab key for navigation in addition to the arrow keys. The arrow keys allow for greater freedom though, as once you have started tabbing through the carousel/timeline, you cannot get out of it with another tab press. Thus leaving it to the end and this is something for me to raise with the original developers to see if they can address that in future versions of the widget.

References

Coyier, C. (2009a, August 10). Prevent Superscripts and subscripts from affecting line-height

\[Blog post\]

. Retrieved from

Coyier, C. (2009b, October 24). CSS Sprites: What they are, why they’re cool, and how to use them

\[Blog post\]

. Retrieved from

Coyier, C. (2013, December 4). SVG tabs (using an SVG shape as template)

\[Blog post\]

. Retrieved from

Donut. (2011). Re: What are the most common font-sizes for H1-H6 tags. StackOverflow website. Retrieved 19 January 2017, from

Franz, L. (2014, September 29). Size matters: Balancing line length and font size in responsive web design – smashing magazine

\[Blog post\]

. Retrieved from

Kadlec, T. (2012). Responsive Media. In Implementing responsive design: Building sites for an anywhere, everywhere web (pp. 95–127). Berkeley, CA: New Riders Publishing.

Krauss, A. (2016, September 8). ARIA roles and attributes: How to actually use them | Aaron Krauss Retrieved from

Lawson, B. D., & Sharp, R. (2011). Introducing HTML5 (2nd edition) (2nd ed.). Berkeley, CA: New Riders Publishing.

Martin, M. (2009, August 20). Typographic design patterns and best practices – smashing magazine

\[Blog post\]

. Retrieved from

Mary Lou. (2012, February 21). Accordion with CSS3

\[Blog post\]

. Retrieved from

Mozilla Developer Network. (2015, July 23). Using the aria-describedby attribute. Retrieved January 19, 2017, from Mozilla Developer Network website:

Mozilla Developer Network. (2016a, December 15). WAI-ARIA basics. Retrieved January 19, 2017, from Mozilla Developer Network website:

Mozilla Developer Network. (2016b, November 17). CSS values and units. Retrieved January 19, 2017, from Mozilla Developer Network website:

Mozilla Developer Network. (2016c, December 3). Background-position. Retrieved January 19, 2017, from Mozilla Developer Network website:

Mozilla Developer Network. (2017, January 16). Tabindex. Retrieved January 19, 2017, from Mozilla Developer Network website:

NHS England. (2017). About NHS England. Retrieved January 23, 2017, from NHS England website:

Nielsen, J. (1996, October 1). Accessible design for users with disabilities

\[Blog post\]

. Retrieved from

Nielsen, J. (2002). Let users control font size

\[Blog post\]

. Retrieved from

Snook. (2015). Colour Contrast Check

\[Computer software\]

. Retrieved 19 January 2017, from

Stanford University Online Accessibility Program. (2016, August 1). Screen reader testing. Retrieved January 19, 2017, from Stanford University website:

W3C. (2016, October 27). Accessible Rich Internet Applications (WAI-ARIA) 1.1 W3C Candidate Recommendation 27 October 2016. Retrieved January 23, 2017, from W3C website,

W3C. The Roles Model. Retrieved January 19, 2017a, from WAI-ARIA website:

W3C. WAI-ARIA role definition model - image. Retrieved January 19, 2017b, from WAI-ARIA website:

W3Schools. CSS Tooltip. Retrieved January 19, 2017, from w3schools.com website:

Watson, L. (2014, August 4). Using the tabindex attribute

\[Blog post\]

. Retrieved from

WAVE web accessibility tool.

\[Computer software\]

. Retrieved January 19, 2017, from

Accessibility and responsive bits

Mon, 02 Jan 2017 00:00:00 +0000

This journal entry represents a mammoth effort to add high-quality content to the site.

I developed and added the patient story. This was based on a characteristics list which I worked through rather vigorously on the afternoon of the 25th. This is still in handwritten form, so I will link to it as a google doc later on. I have included some key references for that process below. I want to highlight the National Joint Registry (2016) data, which was particularly helpful during the process of defining the patient story. Also the specific images that I used will be cited on the portfolio site (including cc0 works; royalty-free works) as I feel it is always very important to include the provenance of images in any context, but especially when engaging in a thought process based on a fictional patient/nurse interaction.
I added images to support the patient story. These images were sourced from pixabay and one of my all-time faves, Creative Commons search as a means to filter Flickr images by license ( ).
I recreated the images that I found for the patient story as drawings in Adobe Illustrator. I wanted the images in the timeline to be small (100px x 100px); this is a limited amount of ‘bandwidth’ to communicate a visual concept. For this reason I decided to use Adobe Illustrator to trace the images and then re-paint them, so that I could accentuate certain aspects through the use of selective colour. This worked well and I did investigate whether these images could be included as svgs, but the visual information was too complex as they were based on photographic materials. As a result I stuck with .png format as the final output.

] .svg version of a timeline image - quite a bit of artifacting (tech-speak for mess) in the image render and it looks too sketchy

.png version of the same image in Adobe Illustrator - more of the visual information from the original photograph is retained. This version has the right level of abstraction.
All of the images were optimised using . Honestly, I absolutely love this tool and will be using this from now on for all my images. Their algorithm somehow trims off the excess while keeping the core visual information.
Accessibility. I ran an accessibility analysis on the site using the WAVE Web Accessibility Tool ( ). It is pretty good, I still have a few aria, alt and title tags to include here or there but I have made progress in this area.
Infuriating. As someone who uses Reader View (I found out that this is the official name for it) mode in Firefox and the equivalent in Safari, I was very frustrated by the restrictive and arbitrary local style sheet implemented by this mode. I have spent way too much time customising how the site looks in this context, but it really mattered to me as this would really put me off a site. Also, focusing on it has highlighted the importance of the semantic web; the reader mode taps into the and other html5 element definitions. With a bit of hardcore tweaking, I finally have something that I can stand behind. The tweaking is outlined in a development post, however I found out by digging into the reader displays in the respective browser stylesheets that they will ignore certain css classes. Specifically I needed to implement a class called .hidden which is the container for the flickity carousel dots. The ‘dots’ are completely useless in the reader view and just look like an orphaned ordered list. I also instituted a .sr-only class which is applied to loading GIFs and other elements which should not be shown in the reader mode. All of this digging will serve me well for the print stylesheet, no doubt…
I ran the Google mobile accessibility test on the site - It passed! Here is the proof: There is still a lot of content to add, but it is great to know that I am on the right track.

References

BBC (2013, January 16). Going paperless “would save NHS billions.” BBC Health. Retrieved from

BBC (2016, September 7). NHS: Health apps to inform patient records. BBC Health. Retrieved from

Booth, R. (2016, December 13). The doctor on your Xbox? The NHS needs more digital ambition. The Guardian. Retrieved from

BS EN ISO 13485:2016 Medical devices. Quality management systems. Requirements for regulatory purposes. (2016). Retrieved 22 December 2016, from

BS ISO 13606-2:2008 Health informatics. Electronic health record communication. Archetype interchange specification. (2008). Retrieved 22 December 2016, from

Choices, N. (2016, November 1). Health and fitness trackers. Retrieved January 2, 2017, from

Dolatabadi, E., Babak, T., & Alex, M. (2014). Vision-based approach for long-term mobility monitoring: Single case study following total hip replacement. Journal of Rehabilitation Research and Development, 51(7), 1165–76.

Farmer, A. Wearables sector grows as smartwatches increase in popularity. Retrieved January 2, 2017, from

Heartfield, R., Loukas, G., & Gan, D. (2016). You are probably not the weakest link: Towards practical prediction of susceptibility to semantic social engineering attacks. IEEE Access, 4, 6910–6928. doi:10.1109/access.2016.2616285

Institute for Quality and Efficiency in Health Care (2014). What can help relieve anxiety before surgery? - PubMed health - national library of medicine - PubMed health. Retrieved from

Johansson Stark, Å., Charalambous, A., Istomina, N., Salanterä, S., Sigurdardottir, A. K., Sourtzi, P., … Bachrach-Lindström, M. (2016). The quality of recovery on discharge from hospital, a comparison between patients undergoing hip and knee replacement - a European study. Journal of Clinical Nursing, 25(17-18), 2489–2501. doi:10.1111/jocn.13278

Nasr, N., & Enderby, P. (2014). Redefinition of life experience following total hip replacement: Analysis of narrative as performance. International Journal of Orthopaedic and Trauma Nursing, 18(2), 89–98. doi:10.1016/j.ijotn.2013.07.005

National Information Board. (2015, March 4). National information board’s workstreams. Retrieved January 2, 2017, from

National Joint Registry. (2016). 13th Annual Report 2016 National Joint Registry for England, Wales, Northern Ireland and the Isle of Man Surgical data to 31 December 2015. Retrieved from

NHS Choices. (2015, November 3). Health Apps library - NHS choices. Retrieved January 2, 2017, from

Press Association (2016, September 7). NHS to have one website for appointments, prescriptions and advice. The Guardian. Retrieved from

Pulkkinen, M., Junttila, K., & Lindwall, L. (2015). The perioperative dialogue - a model of caring for the patient undergoing a hip or a knee replacement surgery under spinal anaesthesia. Scandinavian Journal of Caring Sciences, 30(1), 145–153. doi:10.1111/scs.12233

Rudolfsson, G. (2013). Being altered by the unexpected: Understanding the perioperative patient’s experience: A case study. International Journal of Nursing Practice, 20(4), 433–437. doi:10.1111/ijn.12195

Wilson, D. (2016). An overview of the application of Wearable technology to nursing practice. Nursing Forum. doi:10.1111/nuf.12177

Wilson, C. J., Mitchelson, A. J., Tzeng, T. H., El-Othmani, M. M., Saleh, J., Vasdev, S., … Saleh, K. J. (2015). Caring for the surgically anxious patient: A review of the interventions and a guide to optimizing surgical outcomes. The American Journal of Surgery, 212(1), 151–159. doi:10.1016/j.amjsurg.2015.03.023

Image source: “ ” by is licensed under

Progress on the grid and layout

Thu, 08 Dec 2016 00:00:00 +0000

This week I completed some major fix-up on my grid. Remember when I thought that it was almost fixed? Well I was wrong. In fact I ended up recalculating the whole thing and basing it on a single column being 65px or 6.5% in width. Happily it is now working exactly as I need it to (Mozilla Developer Network saved the day again - I am going to up my donation this year).

I am feeling griddy

Now that my grid is in situ, I am able to base layout elements on it. I do think that in most cases I will need to make unique versions of the columns and tweak the row layout, but keeping the grid architecture in place and temporarily adding the rows/columns to the html has been really helpful for planning out the sections (as shown in the screenshot below). I used my grid to start planning the layout of the content on the Flickity carousel cells - as it turns out this took quite a bit of work (more on that in my next post). I also had my first go at creating an SVG, albeit a very simple one as a placeholder for the first cell in the carousel. The SVG shows the outline of a head and I made it in Adobe Illustrator, this will need to be replaced by more of a photographic image for needs of the project.

about-About

Adding in an About section as the timeline really jumps right into talking about the fictional Patient. I will need to update the to reflect this, but it remains within the bounds of the tasks as task scenario 1 included, “Read introductory information”, this needs to become task scenario 2 and the others need to be bumped up. I also need to revise things where they are areas as opposed to pages, it is bit too specific at the moment.

Testing in Internet Explorer 9

I was astounded to find that pretty much everything on the site is working as one would expect in Internet Explorer 9. This is fantastic and vindicates some of the script selections that I have made in terms of browser support. I was very concerned that the z-index settings would not be respected, but thus far it is looking good. Safari is still a problem though…

Screenshot of the site on 9/12 shown side-by-side in IE9 and Chrome. I am now kicking my myself for not recording the exact browser version numbers on the PC I was using at the time! The majority of my day-to-day testing takes place on a variety of Mac, so I have to check on Windows whenever the opportunity presents.

Toying with the notion of animation

One of the sites that I have mentioned before, has some pretty gorgeous and playful animations on it. I took a look through the code and the javascript attributes and most of it is managed via CSS. This is good, although I would am concerned about browser support and also performance rendering. As a consequence I probably won’t add these features. As a pre-check I used the Chrome timeline tool to record the processes on an older computer that I have at home and I felt that the impact on performance would be a problem the new features operate at the limits of what I want, timing-wise so I will need to see if I can optimise them further. I have already removed aspects of the code that is not used..

References

Basques, K. (2016, December 8). How to use the Timeline tool. Retrieved December 8, 2016, from Common CSS questions. (2015, October 26). Retrieved December 8, 2016, from daneden. (2016, September 27). Daneden/animate.Css. Retrieved December 8, 2016, from Grids. (2016, October 7). Retrieved December 8, 2016, from Lewis, P. (2016, December 8). Rendering performance. Retrieved December 8, 2016, from SVG and CSS. (2016, January 2). Retrieved December 8, 2016, from Z-index. (2016, December 2). Retrieved December 8, 2016, from