Barrier-free plug-in

This is an auxiliary plug-in for the elderly people with visual impairment, listening and speaking disorders, dyslexia, physical disorders, body function decline developed by the website JS plug-in

Plug-in address:Github.com/duheng/assi…

Plug-in access mode:

  • 1 – Add a tag with ID assist-open in the appropriate place on the page such as banner
  • 2 – Introduce the plug-in at the bottom of the page before the body;
  • 3 – Use the following API for corresponding processing if special processing is needed;
<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title> </head> <body> <div id='assist-open'> <script type="text/javascript" src="dist/assist-entry.js"></script> </body> </html>Copy the code

Developer focus

API

  • showTag; Used to open the barrier-free logo (click barrier-free will not open the current page, but jump to another page that does not call showTag)
<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> </head> <body> <a id='assist-open' Assist-href ='https://mozi.com/'> accessibility </a> <script type="text/javascript" SRC ="dist/assist-entry.js"></script> <script> </script> </body> </ HTML > </script> </body> </ HTML >Copy the code
  • zoomState; Returns the page magnification factor
<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> </head> <body> <a id='assist-open' Assist-href ='https://mozi.com/'> accessibility </a> <script type="text/javascript" SRC ="dist/assist-entry.js"></script> <script> ~ (function () {AssistEntry. Message. The subscribe (' zoomState 'state = > {the console. The log (magnification ` page: ${state} `); }) })() </script> </body> </html>Copy the code
  • openState; Returns the plug-in open state
<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> </head> <body> <a id='assist-open' Assist-href ='https://mozi.com/'> accessibility </a> <script type="text/javascript" SRC ="dist/assist-entry.js"></script> <script> ~ (function () {AssistEntry. Message. The subscribe (' openState 'state = > {the console. The log (` whether open barrier-free mode: ${state} `); }) })() </script> </body> </html>Copy the code
  • bigTextState; Large caption enabled
<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> </head> <body> <a id='assist-open' Assist-href ='https://mozi.com/'> accessibility </a> <script type="text/javascript" SRC ="dist/assist-entry.js"></script> <script> ~ (function () {AssistEntry. Message. The subscribe (' bigTextState 'state = > {the console. The log (whether ` up subtitles mode: ${state} `); }) })() </script> </body> </html>Copy the code

Page annotation:

Labels that cannot or cannot be identified by the plug-in must be marked by the service itself

1 – For img tags, set Alt, for example

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> </head> <body> <img Alt =" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fblog%2F201306%2F25%2F201306251505 6 _fij2r.jpeg&refer=http%3a%2f%2fcdn.duitang.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1627139099 & t = 5246 28587af020410785e8ba98157609"> </body> </html>Copy the code

2 – For other labels, use title, such as

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title> </title> </head> <body> <div title=" 标 签" </div> </body> </html>Copy the code

3 – For non-semantic labels, role should be added to mark their real attributes. If title is not marked, label content should be taken, as shown in the following

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title> </title> </head> <body> <div role="button" title=" submit "> Submit </div> </body> </html>Copy the code

Hidden modules:

Add a class name qunar-assist-hide for modules that need to be hidden. The plug-in will automatically detect this class name when it is opened

Page scaling effects:

As the page zooms in, some components that are not adaptive or absolutely positioned may be misaligned and need to be adjusted by the business development

Large text recognition:

For areas where large chunks of text are possible, add a class named Qunar-assist-long-text to the current tag. The plug-in will automatically split the contents under this class

compatibility

  • ie10+
  • All major browsers
  • Firefox (does not support page enlargement)

Other recommended

Mozi: A React-native framework github.com/duheng/Mozi. This framework adopts the configuration part design of applets, combined with the idea of non-invasive programming. With this framework you basically just focus on page development