Creating Accessible Websites
November 16, 2023
10-11 am Pacific
1-2 pm Eastern
Slide 2: Land Acknowledgement
Our presenters today come from across this land, living and
working in what we now know as Canada. We respect and affirm the inherent and
Treaty Rights of all Indigenous Peoples and will continue to honour the
commitments to self-determination and sovereignty we have made to Indigenous
Nations and Peoples.
Slide 3: Our Presenters
- Our presenters today are from the National Network for
Equitable Library Service (NNELS) Accessibility Testing Team:
- Simon Jaeger
- Melody Shih
- David Kopman
Slide 4: Outline
- Why?
- Eight components of basic accessible website creation.
- Explanations and Demonstrations.
- Deep Dive into Accessibility Testing.
- Questions.
Slide 5: Why Make Your Website Accessible?
- To become compliant with legislation.
- Because you’re passionate about accessibility and want to
make sure your digital spaces/content are usable by everyone.
- Because accessibility isn’t a privilege. It’s the right thing to do.
Slide 6: Website Accessibility
Accessible website design can be broken up into eight basic areas:
- Semantic HTML
- Keyboard Navigation
- Forms and Input Fields
- Tables
- Contrast and Readability
- Multimedia Accessibility
- Clear Communication
- Testing and Validation
Slide 7: 1. Semantic HTML
- Structure content logically with proper HTML elements:
- Headings
- Landmarks
- Lists
- Navigation Menus
Slide 8: Demo 1: Semantic HTML
A demonstration by Simon navigating the BC Open Collection using headings and links.
Slide 9: 1.2 Elements
- Ensure all focusable elements have unique and descriptive
labels to convey purpose or content:
- Buttons.
- Links.
- Images.
- Text fields.
Slide 10: Demo 1.2: Elements
A video demo of non-descriptive links on the Regina Public Library website.
Slide 11: 2. Keyboard Navigation
- Ensure all interactive elements can be accessed and used via keyboard navigation:
Slide 12: Demo 2.1: Keyboard Navigation
A demonstration of navigating through an inaccessible form.
Slide 13: 2.2 Keyboard Shortcuts
- Ensure any keyboard shortcuts do not interfere with those of the
operating system and assistive technologies.
- Arrow keys.
- Space bar.
- Tab.
- Enter key.
Slide 14: Demo 2.2: Keyboard Shortcuts
A demonstration of how keyboard shortcuts interfere with screen
reader commands.
Slide 15: 2.3 Focus Indicators
- Implement a visible focus indicator.
Slide 16: Demo 2.3: Focus Indicator
A demo of focus indicators highlighting a search form text box on AccessibleLibraries.ca.
Slide 17: 3.1 Forms and Input Fields
- Label form fields appropriately.
- Provide help error messages and suggestions for form validation.
Slide 18: Demo 3.1: Forms an Input Fields
A demonstration of how form fields are not labelled properly
and a message of an error/suggestions for filling out the items.
Slide 19: 3.2 CAPTCHA
- Implement algorithms that do not require human input instead of using CAPTCHA.
- (Completely Automated Public Turing test to tell Computers and
Humans Apart) is a type of security measure known as challenge-response
authentication.
Slide 20: Demo 3.2: CAPTCHA
A demonstration of how inaccessible CAPTCHA’s can be.
Slide 21: 4.1 Tables
- Avoid using tables for layout purposes.
- Ensure that tables are marked up correctly with headers.
Slide 22: 5.1 Contrast
- Maintain sufficient colour contrast between text and background
to ensure readability.
- The same goes for buttons and other images.
- The Web Content Accessibility Guidelines (WCAG) state that the
contrast ratio should be at least 4.5:1 between the background and foreground
elements to comply with AA requirements.
Slide 23: Demo 5.1: Contrast
A video demo of poor contrast in a contact form on the AccessibleLibraries.ca website.
Slide 24: 5.2 Readability
- Use clear, legible fonts with proper size and spacing.
- Ensure images and text are of high resolution.
Slide 25: Screenshot 5.2: Readability
Alt text: A black cursive text on a white background. The
text is very pixelated and has low resolution. The text is: Use clear, legible
fonts with proper size and spacing. Ensure images and text are of high
resolution.
Slide 26: 5.3 Reflowable
- Allow users to resize text without loss of content or functionality.
- Avoid fixed font sizes and text position.
- Ensure your website is responsive and works well on different devices and screen sizes.
Slide 27: Screenshot 5.3: Reflowable
Alt text of left image: Screenshot of a mobile screen where
the content doesn’t reflow to fit various screen sizes. The content is a book
cover of "He Who Dreams" by Melanie Florence and has been cut off on
the left side, showing only part of the image. The book cover is of an
Indigenous pow-wow dancer dressed in traditional regalia with vibrant colours.
The title and author link below the book cover are also partially cut out of
the frame.
Alt text of right image: Screenshot of a mobile screen where
the content reflows to fit various screen sizes. The content is a book cover of
"He Who Dreams" by Melanie Florence, centred in the middle of the
mobile screen. The book cover is of an Indigenous pow-wow dancer dressed in
traditional regalia with vibrant colours. The title and author link below the
book cover are also centred in the screen.
Slide 28: 6.1 Multimedia
- Provide captions and transcripts for audio and video content.
- Provide audio descriptions for video content.
Slide 29: 6.2 Multimedia Players
- Implement controls for multimedia that allows users to
control/manipulate the media:
- Pause.
- Stop.
- Adjust Volume/Mute.
Label player controls clearly and use semantic HTML.
Provide an efficient method for navigating to the media player.
No autoplay.
Slide 30: Demo 6.2: Multimedia Players
A video demonstration of an audiobook player with poorly
labelled controls and buttons.
Slide 31: 7.1 Clear Communication
- Use simple language that is easy to understand.
- Provide definitions for unusual words.
- Spell out abbreviations and short forms the first time.
- Design and structure the page according to the audience’s needs.
Slide 32: Testing and Validation
- Regularly have your website tested using assistive technologies to identify issues
- Train your team on web accessibility best practices to ensure compliance
- Continuously monitor and update your website to maintain accessibility as content and technologies evolve
- Include an accessibility statement on your website that provides contact information for accessibility-related concerns.
Slide 33: Deep Dive into Testing
- Accessibility testing is the process of reviewing websites, apps,
and other digital content against common standards and assessing usability for
people who use assistive technologies.
- This work is best performed by qualified experts with a variety
of lived experiences with a disability.
- What may work for someone who is blind may not work for someone
who has low vision, and further to that, may not work for someone who has a
learning disability.
Slide 34: Types of Testing
- Automated Testing:
Quickly identifies the low-hanging fruit that should be remediated to improve
accessibility. It does not catch everything and lacks real human interaction
with content in human ways.
- Manual Code Review (WCAG):
Involves humans with Web Content Accessibility Guidelines and code experience
to inspect the code to ensure it is compliant to WCAG standards.
- User Experience / User Testing:
Include qualified experts to ensure the content is accessible and usable.
Slide 35: The Best Method
- Keeping accessibility in mind from the start and consulting
qualified accessibility testers (with disabilities) will always be the best
method, but we know that this isn't always possible.
- A combination of automated testing, code review by humans, user
experience, and usability testing will yield the best results.
- Although it seems like a lot, catching that low-hanging fruit and
doing code review will help decrease the time needed for expert usability
testers to evaluate (and re-evaluate) your site.
Slide 36: Overlays & Toolbars
- Accessibility overlays are products depicted as an “automated solution” that modify the code of a webpage, often
using JavaScript.
- These products are usually in the form of a plugin,
app, toolbar, or widget, and the companies that create and promote
the use of accessibility overlays claim their products automatically
detect and fix web accessibility issues.
These tools often fail to correctly identify problems in
several areas, including keyboard traps that prevent users from
using form fields, missing links, focus order, quality and relevance
of image descriptions and alt-text, use of layout tables,
close captions, inaccessible captchas, and misidentified language.
Slide 37: Learn More About Overlays
Slide 38: Traditional Audits
- Compliance-based.
- Often only to Web Content Accessibility Guidelines (WCAG) Level AA.
Usually missing the human component.
Content can be compliant but not usable, which is why usability testing is needed.
Slide 39: Usability Testing
- It is centred around real experiences and interactions with the content/product.
- Ensures the content/product is not only accessible but usable as well!
- Those compliance issues (found in WCAG) are often solved in the process.
Slide 40: Lived Experience is Crucial
"As an organization that serves students with disabilities,
we felt it was necessary to make sure that all our digital access points were
as barrier free as possible. It was important to us to have our websites
evaluated by people with lived experience … Their report was extremely thorough
and not only identified the parts of the website that needed to be changed, but
also for many issues, explained the impact on users."
- Jennifer Weldon, CAPER-BC.
Slide 41: The NNELS Process
- In our work at NNELS we blend the traditional audit with usability testing.
- Not only do we have a list of criteria we test for that is WCAG
based, but our team also interacts with the content/products as members of the
public.
- We specialize in testing reading application, electronic reading
content, websites, and more!
- Some of our reports on a variety of digital resources for
libraries are public:
Slide 42: Testing is Essential
"No matter how accessible you think you are, the
sophisticated and savvy testers at NNELS will root out any issues. From
confusing wording or UX to deep functionality issues, they help you polish your
project and present your best face to the world. Their impact on the CAT-DB
site was profound — from their enthusiasm for the project, to their finessing
of the details, it is a vastly better project because of their feedback and
engagement with the site."
- Laura Brady, CAT-DB Project Leader.
Slide 43: Great Resources
Slide 44: Questions
- Questions? Please email us at info@AccessibleLibraries.ca.
- Follow us on social media:
Slide 45: Thank you!