Inclusive Design means for everyone and every situation. Accessibility enhences usability. Therefore good responsive design plays a crucial role in inclusive design practices. Following some responsive principles, ensures inclusive and user-friendly digital experiences across diverse devices and user preferences.
Content breakpoints or tweakpoints
One crucial aspekt that springs in mind when talking about responsiveness are breakpoints. Creating fixed breakpoints however will not always lead to a good experience according to the diverse range of viewport variations available. Instead, designers should create flexible design from the beginning, implementing breakpoints where the content breaks the layout. This delievers successful layouts across various devices. As the content reaches a point of collision, overlap, or wrapping, when resizing the window, it becomes evident where breakpoints are needed.
Avoid fixed width or heights
Another rule according to always deliver a good content is to avoid fixed widths or heights off elements. Instead use the innate flexibility of boxes to accommodate content across various spaces.
Pinch-to-zoom
Another pattern, a more technical one is the enabling of pinch-to-zoom via the viewport meta tag. It is essential for responsive design functionality. Disabling this feature can make user experience worse by making text too small to read, limiting the view of image details and making it utterly complicated to select text for copy/paste.
Responsive Font-size
A good practice for setting font-size in responsive design is setting the font size as a percentage on the root (<html>) element. For consistency when resizing font-size, padding, and margin, relative units like rem or em are to be preferred. These units ensure that scaling is proportionately on all pages, so it is also easy to use for consitency reasons.
Viewport units
Additionally, viewport units (vh and vw) can be used to create text that scales relative to the height or width of the viewport. Using viewport units enables responsive text without the use of extensive media queries. This guarantees a minimum font size and allows incremental scaling and proportionate adjustments relative to the viewport size.
Website Structur
The use of semantic HTML guarantees technical accuracy for users of assistive technologies and at the same time determines the interaction behaviour for predictability and efficiency.
Webfonts
Although there are special fonts for the web, webfonts can still become a major issue for readability. There is an effect called FOIT (flash of invisible text), which might leave users on a page without visible text if the font is not loaded. To avoid this a default font should be embedded in the stylesheet. This in turn, might show the text but might result in FOUT (flash of unstyled text). It causes a sudden transition and jumping of linies when the system fonts changes to web fonts. To avoid this select a fallback system fonts with similar intrinsic dimensions.
Skip Link
Skip links allow keyboard users to easily move through the page via keyboard and bypass the navigation and header content. They primarily help screen reader users, but are also helpful for those who rely on keyboards by providing efficient navigation.
Formating Text
Text can be a big pitfall when it comes to readability. Although it should be clear by nowadays that text must be formatted according to the medium and that different principles apply to the formatting of text on the web than in print design, it very often happens that texts on the web are difficult to read for all users because this has not been taken into account.
Text justification is almost never a good choice. It works in print because there you could manually break lines and avoid empty spaces but it will not work with flexible boxes. This diminishes readability due to uneven word spacing for all users, not only handicapped ones. Using the default text-alignment left provides better readability. Also adjusting the line height or leading of textblocks is neccessary. A bigger line-height makes ensure readability.
Content
When it comes to content, it is essential to be aware of the importance of creating engaging and accessible content. Writing content is often outperformed by the visual design. Nevertheless it is an essential aspect of designing a website that deserves equal attention. Content creation should not be postponed and must be integrated into the overall design strategy.(66) The readability of written content relates to comprehension. Tools such as the Flesch-Kincaid readability test can be used to assess content. Content is scored on a scale from 0 to 100, with a higher score indicating a more reader-friendly text. Similarly, the Flesch-Kincaid level test gives a US school grade indicating readability based on the age of the target audience. A higher grade indicates more complex content that is less accessible to younger readers. (88-89)
Videocontent
It is good practice to subtitle videos. Closed captions contribute greatly to inclusion. Subtitles should be available as a separate file rather than embedded so that users have the option to enable or disable them. Subtitles in videos are important, improving accessibility for a wider audience. They serve not only the hearing impaired, but anyone temporarily unable to hear audio, in public places for example. (97).
Links
Links should be labled. For screen reader and keyboard support, identifying links could be a challange. This additional text should not replace the existing link text, but rather be appended or prepended to it. The use of visually hidden text that is accessible to screen readers, such as “Current page”, is a suggested approach to improve link identification (135). Labelling interactive elements is fundamental to accessibility. Each interactive element should have an accessible name to facilitate interpretation and communication using assistive technologies. This is in line with WCAG criterion 4.1.2. Such considerations contribute significantly to the creation of an inclusive digital environment. [1]
One of the main ressourches or accessibility are W3C specifications for accessibility which offer implementation solutions aligned with the accessibility guidelines. This approach closes the gap between human-computer interaction and the development of accessible web applications.
Accessibel patterns are categorized according to three primary functions. The three categories are:
- Web content: How the content is organized on the webpage
- Navigation structures across all pages
- User interaction components, such as CTA-Buttons
This pattern language presented at W3Cis a reference for web designers and accessibility tester. It presents a structured overview of design knowledge regarding accessibility. The classification of the patterns according to functions and the abstraction level makes it easy to pick the relevant patterns for each specific design issues. It is crucial to prioritize accessibility in structure and content for the web. [2]
1 Inclusive Design Patterns, Heydon Pickering, 2016, Freiburg, Germany https://www.smashingmagazine.com/2016/10/inclusive-design-patterns/
2 Daniela Fogli, Loredana Parasiliti Provenza, and Cristian Bernareggi. 2010. A design pattern language for accessible web sites. In Proceedings of the International Conference on Advanced Visual Interfaces (AVI ’10). Association for Computing Machinery, New York, NY, USA, 307–310. https://doi.org/10.1145/1842993.1843048
