CSS dependence
Can users understand and access content independant of CSS?
Why it’s important
- Mana has a colour deficiency and overrides page colours to enforce certain colours.
- Susan is low-sighted and is reliant on a screen reader to convey content in the correct order.
- Beatrice has dyslexia and prefers to change the fonts and text spacing for better readability.
CSS dependence refers to websites that are reliant on CSS to be functional or understandable.
A common CSS dependence issue is content order which can be reordered with CSS. This may be an issue as assistive technology will read the content in an incorrect order.
Next steps
-
Disable CSS and check for:
- Missing information, e.g. images and text.
- Code or other items intended for development only.
- Overlapping text.
- Make sure the content order makes sense without CSS applied.
- Use CSS to improve legibility by increasing line spacing, left and right margins and specifying fonts designed for a monitor.
- If absolute positioning is used, be sure that the positioned element is in logical order, so that it will be coherent when CSS is disabled.
- Use the web developer browser plugin for editing and disabling/enabling CSS.
References
Resources
- Accessible CSS (WebAIM)(this link opens an external website)
- Writing CSS with Accessibility in Mind(this link opens an external website)
- HTML Source Order vs CSS Display Order(this link opens an external website)