Group Toolbar Menu

Accessibility

  • Accessibility primer

    What does it mean to make sites 'accessible'?
    Quote:
    Web accessibility, or eAccessibility, is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. When sites are correctly designed, developed and edited, more users have equal access to information and functionality.

    (...)

    The needs that web accessibility aims to address include:

    Visual: Visual impairments including blindness, various common types of low vision and poor eyesight, various types of color blindness;
    Motor/mobility: e.g. difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc., due to conditions such as Parkinson's disease, muscular dystrophy, cerebral palsy, stroke;
    Auditory: Deafness or hearing impairments, including individuals who are hard of hearing;
    Seizures: Photo epileptic seizures caused by visual strobe or flashing effects.
    Cognitive and intellectual: Developmental disabilities, learning difficulties (dyslexia, dyscalculia, etc.), and cognitive disabilities (PTSD, Alzheimer's) of various origins, affecting memory, attention, developmental "maturity", problem-solving and logic skills, etc.[2]

    Source: https://en.wikipedia.org/wiki/Web_accessibility

    This is a very broad description of accessibility, and it's perhaps still a bit confusing on what this means for us as style creators and as its users. In short, when we talk about making styles accessible, what we focus on are the following points:
    • Avoid making pages large in filesize (e.g. using full size images at the highest quality, using many images, using an excess of fonts the browser needs to download etc.)
    • Avoid hiding text content that screen readers need access to, to have a page make sense (e.g. 'display:none;' on text because you're replacing it with an image, but a screen reader can't read the image)
    • Ensuring good contrast between the text and the background
    • Ensure text font sizes are large enough
    • Avoid flashy images
    • Making links easy to tap on smaller screens
    • Offering alternatives to color-specific features for color blind people
    • etc.

    Do we have to make styles accessible?
    The honest answer to this is: no, we don't have to.

    I think the better question to ask though is: do people deserve to have access to the content we put out regardless of their abilities and access to up-to-date modern devices and connections? I believe that all people are deserving of being able to fully participate on our favorite sites on the internet, and the unfortunate reality is that too often, they cannot.

    Don't get me wrong, I'm by no means perfect at making my content fully accessible; I'm still learning and becoming aware of new accessibility needs every day. I also sometimes choose to put form over function because I prefer the way it looks, even if it's of no benefit to others. But there are many ways we can make our content more enjoyable for more people by making smaller, different choices.

    I'm at an increased risk of losing my vision earlier in life due to chronic illness, and it's very depressing how inaccessible the internet is to visually impaired folks. I hope that we can encourage each other to be mindful of making our styles enjoyable to a larger audience and allowing them to not feel othered over our decisions.
  • Back to the top

  • Accessibility Tools

    Here are some tools you can use to check if your style is accessibility friendly!
    • WebAIM: Contrast Checker -- This tool helps check that the contrast between your font and its background is good enough to help various visually impaired people have an easier time reading it.
    • TinyPNG -- This tool compresses .jpg and .png files without losing visual quality, to help increase loading speed and minimize bandwidth usage.

    Sometimes you want to hide certain elements with text, but doing so removes context for people who can't see the (potential image) replacements. To avoid causing inaccessibility, I recommend styling the text to transparency and perhaps moving the element off-screen, or resizing it etc. It may look something like this:
    Code:
    h1#characterName { color:transparent: font-size:1px; }
    Code:
    #charheader .portraitcontainer { position:absolute; left:-999px; }

    Even though neither are now visible to us, they still exist and are displayed inside the HTML elements, which screen readers will identify.
  • Back to the top