All in One Accessibility

A Quick Lektor website accessibility improvements in just 2 minutes!
By: SkynetDesigner3
Lektor web accessibility widget

The internet landscape is changing. For website owners, it is essential to deliver an accessible and seamless user experience by ensuring all visitors including people who are blind, hearing or vision impaired, motor impaired, color blind, dyslexia, cognitive & learning impaired, seizure & epileptic, and with ADHD problems; can see, understand, navigate, and easily use Lektor website conveniently!

Kick-start your efforts into improving website accessibility in a cost-effective way with Lektor All in One Accessibility - an AI based accessibility solution for quick website accessibility improvements. It allows users to select available accessibility features as per their needs and peruse the content. It improves website accessibility for the standards including ADA, WCAG 2.0, WCAG 2.1, WCAG 2.2, Section 508, Australian DDA, European EAA EN 301 549, UK Equality Act (EA), Israeli Standard 5568, California Unruh, Ontario AODA, Canada ACA, German BITV, France RGAA, Brazilian Inclusion Law (LBI 13.146/2015), Spain UNE 139803:2012, Japan JIS X 8341, Italian Stanca Act, Switzerland DDA, and Austrian Web Accessibility Act (WZG)!

Explore the following steps to integrate All in One Accessibility widget on Lektor website:

  • install the plugin, run the following command:

    pip install lektor-all-in-one-accessibility
  • Create Config File:

    Inside your Lektor project directory, create the following file:

    your-lektor-project/configs/accessibility.ini

  • Add Configuration Settings:

    Add the following settings to configs/accessibility.ini:

    Here is an example config:

    enable = true

    widget_color_code = #420083
    widget_icon_size = aioa-default-icon
    widget_position = bottom_right
    widget_icon_type = aioa-icon-type-1
    widget_size = oversize

    enable_widget_custom_position = false
    widget_position_right = to_the_left
    widget_position_right_px = 20
    widget_position_bottom = to_the_bottom
    widget_position_bottom_px = 20
    enable_widget_custom_size = false
    widget_icon_size_custom = 50

    If enable = true

    The plugin loads and validates your accessibility.ini config.

    Required fields:
    widget_color_code
    widget_icon_size
    widget_position
    widget_icon_type

  • Use the following valid values when setting the fields below in your configs/accessibility.ini file.

    • Set the widget icon color using a valid hex color code. Example:

      widget_color_code = #420083

    • Choose one of the predefined icon size classes: aioa-extra-small-icon, aioa-small-icon, aioa-default-icon, aioa-medium-icon, aioa-big-icon Example:

      widget_icon_size = aioa-default-icon

    • Choose a position for the icon: top_left, top_center, top_right, middle_left, middle_center, middle_right, bottom_left, bottom_right Example:

      widget_position = bottom_right

    • Choose a widget icon type: aioa-icon-type-1, aioa-icon-type-2, ..., aioa-icon-type-29 Example:

      widget_icon_type = aioa-icon-type-1

  • Configuration Reference:

    SettingDescription
    enableEnable or disable the widget settings (true / false)
    widget_color_codeHex color code for the widget icon (e.g. #420083)
    widget_icon_sizePredefined icon size class (e.g. aioa-default-icon)
    widget_positionWhere to place the icon (bottom_right, top_left, etc.)
    widget_icon_typeWidget icon type (e.g. aioa-icon-type-1)
    widget_sizeWidget size option (oversize or regular)
    enable_widget_custom_positionEnable manual icon positioning (true / false)
    widget_position_rightHorizontal alignment (to_the_left or to_the_right)
    widget_position_right_pxHorizontal offset in pixels
    widget_position_bottomVertical alignment (to_the_bottom or to_the_top)
    widget_position_bottom_pxVertical offset in pixels
    enable_widget_custom_sizeEnable custom icon size (true / false)
    widget_icon_size_customCustom size value (e.g. 50)
  • Set the LEKTOR_DOMAIN Environment Variable:

    Before running the Lektor server, set the LEKTOR_DOMAIN environment variable to your website's domain

    For Windows (Command Prompt):

    set LEKTOR_DOMAIN=http://yourdomain.com

    For macOS/Linux (bash/zsh shell):

    export LEKTOR_DOMAIN=http://yourdomain.com
  • Run the Lektor Server

    lektor server
  • Template Integration

    To render the widget in your site's layout, insert the following Jinja variable in your base template (usually located at templates/base.html):

    <footer>
      {{ accessibility_widget_script | safe }}
    </footer>

Reach out if you need any help with the installation or technical assistance! We’d love to help!

Report a problem

Skynet Technologies is a proud W3C (World Wide Web Consortium) and IAAP (International Association of Accessibility Professionals) member that help us to be a part of the global accessibility community and stay up to date with compliance guidelines.

The businesses, large enterprises, Federal and state governments, educational institutions and universities who are considering remediating websites with full ADA WCAG 2.0, WCAG 2.1, WCAG 2.2 compliance; we provide managed website accessibility remediation and compliance solution including audit, consulting, website remediation, document accessibility remediation, VPAT accessibility conformance report, regular maintenance, monitoring, training, and support.

If you are looking for enterprise or custom web accessibility solutions, request a free ADA website accessibility remediation quote or email us at hello@skynettechnologies.com.