Accessibility by default

Websites are meant to be truly global, and that means that web developers must be conscious to ensure that their websites create the same meaningful experience, whether a visitor is browsing through the website visually, or using accessibility tools such as a screen reader. Glot is designed to ensure that users have access to tools that can easily create content compliant with WCAG 2.0 AA accessibility standards.

Intuitive content pathways through widget constraints

Website content should always be organized logically in order to create a ordered table of contents that can be browsed and parsed properly by a screen reader. A table of contents is an apt analogy - at the base of it, your website is essentially a book, with each area of the site comprising a chapter, and individual webpages acting as well, pages in your book.

Webpage content, accordingly, should be separated into individual sections or topics, following a heirarchy of headers - each webpage should have one Header 1 (<h1>) - that's the broad, main title or topic for the whole webpage. After that, the rest of the content should be organized into more specific subtopics, each with a Header 2 (<h2>) title, each of those in turn broken down as needed into sub-sub-topics, each with a Header 3(<h3>) title, and so on, all the way through to Header 6 if needed! Screen readers depend on this logical ordering in order to read content to a website visitor properly.

For example, if you were to create a webpage or a document about plants, you might organize your content like this:

• Plants (Header 1)

  • Trees (Header 2)

    • Oak (Header 3)

    • Ash

    • Elm

  • Shrubs (Header 2)

    • Rose (Header 3)

    • Dogwood

    • Yew

  • Wildflowers

    • Daisies

    • Pansies

    • Moning Glories

In the same way, if you were to create an "About Us" webpage, you might organize your content like this:

• About Us (Header 1)

  • Our Team (Header 2)

    • John Smith (Header 3)

    • Jane Smith

  • Our Offices

    • Canada

    • United States

  • Our Mission

Screen readers depend on this logical ordering in order to read content to a website visitor properly. Accordingly, accessibility assessments fail if the ordering of these headers is broken. If you're finished talking about a topic, you can follow a Header 3 with a subsequent Header 2, as you can see in the list above, but you should never skip from a Header 1 straight to a Header 3 without a Header 2 in the middle.

All of Glot's widgets are designed with these rules in mind - widgets are structured into content "Page Sections" to encourage you to break your content down, one section at a time. Within each Page Section, widget installation constraints ensure that any widgets that you can install within each subsequent widget will follow the correct header sequence by default.

Sensitive design and testing

All templates designed by Proximify are tested to ensure that normal usage of included widgets will not result in any keyboard or screen reader dead ends.

As well, Glot dynamically scrubs entered rich-text content to ensure that there are no empty or improper HTML tags or formatting that would cause problems for screen readers, removing them while preserving text content as-written.

Built-in accessibility coding

ARIA Labels

ARIA labels are tags that are coded into each and every component on a webpage. They tell screen readers what the function of a particular component is, in order that the screen reader can tell the visitor what each component is supposed to do, and how they should interact with it. For example, an ARIA label indicates that a button is, in fact, a button, and can be clicked!

Glot's widget designer includes ARIA labeling as a default part of the widget development process, ensuring that widget designers use appropriate ARIA labels and tags in relevant widget components, and so that end-users do not have to add ARIA labels and tags per-component.

Accessibility Text

Accessibility text allows website makers to describe the contents of an image, so that a screen reader can tell a visitor what a particular image contains. All widgets designed by Proximify automatically include corresponding alt text parameters wherever images are used. We also take further steps to ensure proper accessibility function, allowing website makers to exclude decorative images, or those without semantic meaning for the webpage, from the screen reader sequence, in order that screen readers do not read out a confusing image file name instead.

Conscious Colour Theming

Colour choices make a world of difference for legibility and accessibility.

Glot's templates include colour theming rules that ensure proper contrast ratios throughout, no matter which combination of colours is chosen. This is achieved through combinations of CSS values and classes that are tested thoroughly with each widget, to ensure that in all states, whether an object is static, or is being interacted with by the user through clicks or cursor hovering, the combination of foreground and background colours meet the required contrast ratios and important text information is always legible.

All templates designed by Proximify include widgets to create header and meta information