Accessibility for designers - Recording

An introduction to the key aspects of web accessibility and inclusive design, relevant to web designers

Get 10 training courses for the price of 8

To help you get even better value this year, we have a 10 for the price of 8 bundle on our training courses for you and your team to enjoy. 


Book your training bundle
Save 10% on training courses: If you're looking to book individual courses, get 10% off any upcoming AbilityNet online training course using the discount code AbilityNetTraining10

 

Page last updated following training on 24 August 2023

Watch the recording:

Polite request:

Although you may wish to share this resource with your team, please don’t share this recording publicly or anywhere where it can be accessed easily by a wider group. As a charity, the money we receive from delivering paid training goes towards our free services and charitable operations. We are likely to run the training again in the future and so want it to still hold value for people who haven’t yet attended.
 

Download the presentation:

Accessibility for designers presentation slides 

Download the transcript:

Accessibility for designers transcript

Q&A:

We were pleased to be able to answer so many of your questions on the live training, which you can revisit by watching the recording. For those we ran out of time to answer or provided a typed response for you can find the responses below. You can also find details of other upcoming training on our website. 

Q: How can we achieve that elements shift underneath each other when we zoom in 400%? Is there a best practice for this, some tips, or things to look out for?

A: To achieve the desired effect of elements shifting underneath each other when zoomed in 400% (commonly known as responsive design), you can follow these best practices and consider the following tips:

•    Use CSS Media Queries: Media queries allow you to apply different CSS styles based on the device's screen size or zoom level. By defining specific rules for different screen widths or zoom levels, you can control the layout and behaviour of elements.
•    Utilize Fluid Layouts: Design your layout using relative units like percentages, ems, or viewport units (vw, vh) instead of fixed pixels. This allows elements to adapt and resize based on the available space, accommodating different zoom levels effectively.
•    Implement Flexbox or Grid Systems: CSS Flexbox and CSS Grid provide powerful layout mechanisms that enable responsive designs. They allow you to create flexible and dynamic layouts that automatically adjust the positioning and size of elements based on available space.
•    Consider Mobile-First Approach: Start designing for smaller screens first and then progressively enhance the layout as the screen size increases. This approach ensures a solid foundation for responsiveness.
•    Test on Various Devices and Zoom Levels: It's crucial to test your design on different devices and zoom levels to ensure it behaves as expected. Check how the layout adjusts, how elements stack, and if the content remains readable and usable at various zoom levels.
•    Avoid Using Absolute Positioning: Avoid relying heavily on absolute positioning, as it can lead to elements overlapping or not scaling properly when zoomed. Instead, opt for more flexible positioning methods like relative or float-based layouts.
•    Pay Attention to Text and Images: Ensure that text remains legible and images resize appropriately when zoomed in. Avoid using fixed-width images or text elements that may cause content to overflow or become too small to read.
Responsive design is an iterative process, and it's essential to continuously test and refine your design across various devices, zoom levels, and user scenarios to ensure a seamless and optimal experience for your users.

Q: I am interested in knowing about punctuation around hyperlinked text. For example, if you are hyperlinking the end of a sentence in the middle of a paragraph, should: A) You include the full stop inside the hyperlink; B) Include the full stop outside of the hyperlink; or C) Not include a full stop at all, and just start the new sentence afterwards?

A: Regarding punctuation around hyperlinked text, there isn't a universally fixed rule, but there are general practices that can be followed. Here are some considerations: 

•    Including the full stop inside the hyperlink: This approach may be suitable when the hyperlink represents the entire sentence or phrase. However, it can potentially lead to issues if the hyperlink is placed at the end of a sentence, as it may cause confusion for screen readers or affect the readability of the content.

•    Including the full stop outside of the hyperlink: This is a commonly preferred practice. Placing the punctuation outside the hyperlink helps maintain clarity and readability, especially when the hyperlink is located at the end of a sentence. It ensures that the sentence-ending punctuation is not mistaken as part of the link itself.

•    Not including a full stop at all: This approach is generally avoided, as it can create ambiguity and disrupt the flow of the text. It is recommended to include proper punctuation to clearly indicate the end of a sentence.

So generally adding the full stop/punctuation outside of the hyperlink aligns with common practices. It allows screen readers to recognize the sentence ending while keeping the grammar separate from the link.

Q:  Are there any tools you recommend to analyse/test web sites for accessibility?

A: There are several tools available that can assist in analysing and testing websites for accessibility. Here are a few popular ones:
•    WebAIM's WAVE (Web Accessibility Evaluation Tool): WAVE
•    Axe by Deque Systems
•    ARC Toolkit
•    Accessibility Insights for Web
•    Chrome DevTools

Q: Can you talk about not having the same text for all links on a page?

A: Text links should have descriptive and meaningful text that accurately represents the target page or content. Generic or ambiguous link labels like "click here" or "read more" can be problematic for users who rely on screen readers or keyboard navigation.
Besides that, if multiple links on a page have the same text but they lead to different destinations, it can cause confusion for users.

Q: What might be a reason someone needs to zoom 400%? Is this because of certain technologies, or for greater visibility of content? 

A: The later is correct,  for people with low vision, enlarged text with reflow enables reading with ease. So the criteria requires to be checked till 400%.

Useful links:

WCAG 2.1 text spacing requirement

Text Spacing Testing Bookmarklet

WebAIM Accessibility Principles

Yale University Accessibility Checklist

Paul J Adam bookmarklets information

Accessibility Bookmarklets

IAAP accessibility qualifications

WCAG 2.1 Guidelines

Colour Safe colour contrast analyser

Tanaguru colour contrast-finder

W3C's alt decision tree

About accessible autoplaying carousel

Colour Contrast Analyser - Win/macOS application

Stark - Sketch / XD Plugin

Photoshop Colour Blindness Filter - Proof Setup

Accessible Colour Palette Builder

NoCoffee Vision Simulator - Chrome Extension

A11y Focus Orderer – Figma Plugin

W3C's Recommended Web Accessibility Tools

Tools for accessibility testing:

NVDA Screen Reader

Colour Contrast Analyser

Web Developer Extension

Accessibility bookmarklets

Arc Toolkit (Chrome)

Chrome Dev Tools and FireFox Dev Tools

aXe automated scanning tool

Examples of well designed websites:

www.bbc.co.uk

www.gov.uk

 

Looking for more accessibility training?