University of Birmingham Polyfilling Accessible Chemistry

University Of Birmingham Polyfilling Accessible Chemistry-PDF Download

  • Date:25 May 2020
  • Views:23
  • Downloads:0
  • Pages:9
  • Size:277.07 KB

Share Pdf : University Of Birmingham Polyfilling Accessible Chemistry

Download and Preview : University Of Birmingham Polyfilling Accessible Chemistry


Report CopyRight/DMCA Form For : University Of Birmingham Polyfilling Accessible Chemistry


Transcription:

Polyfilling Accessible Chemistry Diagrams,Volker Sorge. School of Computer Science Progressive Accessibility Solutions Ltd. University of Birmingham Birmingham UK,www cs bham ac uk vxs progressiveaccess com. Abstract We present a polyfill solution for replacing inaccessible im. ages of molecules with fully web accessible chemistry diagrams Thereby. marked up bitmap images on a client web site are extracted server side. recognised and semantically enriched to generate scalable vector graph. ics SVG with embedded chemical information These graphics are then. re inserted into the original web page providing readers with accessibil. ity features such as speech output and interactive exploration together. with synchronised highlighting and magnification Our solution works. for most combinations of browsers and screen reading software on all. major desktop platforms and while it is currently only implemented for. chemical diagrams it is extensible to other STEM subject areas. 1 Introduction, Diagrams are an important means of conveying information in STEM subjects. and they are ubiquitous in teaching material Since they need to be understood in. fine detail their precise description is often very difficult and they thus present. a major hurdle for inclusive education Even in electronic teaching material. diagrams present an obstacle as they are generally given in raster based image. formats e g gif png and jpeg leaving them inaccessible for visually impaired. learners Screen readers can only pick up alternative texts that is usually not. enough to convey a full description and magnification tools struggle to deal with. diagrams since magnification does not proportionally increase resolution leading. to a loss of image quality, To overcome this problem on the web we present a new approach for making. chemical diagrams accessible by automatically replacing inaccessible bitmap for. mats with fully web accessible scalable vector graphics SVG in web pages The. idea is implemented as a polyfill solution that is a JavaScript library that can. be injected into any client web site where marked up images are recognised and. transformed server side into accessible SVG and re inserted into the web page. In addition to recognising bitmap images it can also exploit standard chemical. markup notation to produce SVG diagrams, The library draws on our work in fully automatically generating web ac.
cessible chemical diagrams without the need for specialist tools for authoring. or reading the accessible diagrams 8 Instead it employs image analysis to. recognise diagrams semantic enrichment to derive detailed information on their. content and regeneration into an annotated graphics format that makes them. amenable to assistive technology Web browsing software allows readers to in. teractively engage with diagrams by exploring them step wise and on different. layers enabling aural rendering of diagrams and their individual components. together with highlighting and magnification to assist readers with low vision or. learning difficulties And although originally developed as an assistive technol. ogy tool the approach could also be exploited as a general teaching tool as well. as extended to other STEM subject areas,2 Producing Accessible Chemical Diagrams. Our approach is based on a procedure to recognise chemical diagrams from. bitmap images and transform them into semantically enriched fully web ac. cessible SVG graphics The procedure is fully automatic and combines three. independent computational steps into a single software pipeline. 1 Image analysis recognises molecule diagrams, 2 Semantic enrichment computes detailed information on chemical molecules. 3 Reproduction of diagrams in navigatable Scalable Vector Graphics SVG. We summarise how each of these steps proceeds in this section. For more details on the process see also 8 As a running ex. ample we use the recognition and semantic enrichment of the. chemical molecule for Aspirin which is originally given as the. bitmap image presented on the right,2 1 Image Analysis. The Image analysis that recognises molecule diagrams is based on our previous. work 5 which has shown itself superior in a number of international recognition. competitions 4 6 It proceeds in two stages Image Segmentation decomposes. diagrams into a set of geometric primitives Diagram Recognition uses chemical. knowledge to assemble a basic representation of the diagram. In the Image Segmentation step an image is vectorised in order to segment it. into the main constituents making up the diagram resulting in a set of distinct. primitives like lines circles solid triangles arcs or character groups together. with their geometric location in the original image This process is robust not. only with respect to the type of bitmap images e g jpeg png tiff but also. with respect to differences in authoring styles or potential problems stemming. from the image origin For example noise introduced by image capturing tech. niques such as scanning is removed in a pre processing step The result of the. segmentation is then a textual representation of the geometric primitives For. our Aspirin example we get a set of 22 geometric primitives 18 lines and 4. character groups These are given partially in Fig 1. In the subsequent Diagram Recognition step the actual recognition of the. molecule is performed by a rule engine in which largely disjoint rules are re. peatedly applied to the initial set of geometric primitives rewriting it into a. 60 4 336 279 188 992693 206 825861,chargroup O 258 223 287 257. chargroup O 195 114 224 148,chargroup O 6 5 35 39,chargroup OH 132 5 192 39.
line normal 82 62 85 56 4 4611686018427387904 0,line normal 83 130 82 63 4 4611686018427387904 0. line normal 83 276 145 240 4 0 577093,line normal 20 239 82 276 4 0 578389. line normal 274 166 269 166 4 0 000000, line normal 267 220 268 167 4 4611686018427387904 0. line normal 81 62 34 36 4 0 575445,line normal 86 56 127 32 4 0 575723. line normal 85 55 39 28 4 0 580944, Fig 1 Abbreviated list of geometric primitives for Aspirin.
molecule id m1 xmlns http www xml cml org schema, atom id a1 elementType C x2 1 4301 y2 0 6083 hydrogenCount 3. atom id a2 elementType C x2 0 4599 y2 1 6683 hydrogenCount 1. bond id b1 atomRefs2 a3 a1 order S,bond id b2 atomRefs2 a5 a4 order S. bond id b3 atomRefs2 a6 a5 order S,bond id b4 atomRefs2 a7 a4 order D. Fig 2 Abbreviated CML for Aspirin molecule, graph representation of the given molecule diagram Rules are defined in terms. of preconditions and consequences A rule is applicable if there exist geometric. objects that satisfy its preconditions Executing its consequence results in the re. moval of existing geometric objects and the addition of elements to the graph as. well as possibly the addition of new geometric objects In general preconditions. of different rules are mutually exclusive and thus the order of rule application. is irrelevant, The graph structure resulting from the rewriting step serves as a basis from.
which efficient electronic representation formats can be generated While these. formats are largely equivalent we concentrate on generating standard chemical. file formats such as MOL and CML Chemical Markup Language 2 as well as. InChI International Chemical Identifier For Aspirin the InChI is given as. InChI 1S C9H8O4 c1 6 10 13 8 5 3 2 4 7 8 9 11 12 h2 5H 1H3 H 11 12. while the corresponding CML is given in parts in Fig 2. It is worth noting that the image segmentation is fully generic that is it is. independent of the actual type of diagrams analysed Only the diagram recogni. Fig 3 Functional groups and abstraction graph for Aspirin molecule. tion actually uses information on the domain i e chemistry Consequently the. approach is portable other STEM diagrams using similar geometric primitives. simply by replacing the set of rules used for recognition and graph rewriting. 2 2 Semantic Enrichment, While the result of the image analysis is sufficient to reproduce the diagram and. to distinguish molecules the extracted information is still only sufficient for a. flat representation in the sense of describing single components of a diagram. and their relationship to their direct neighbours However they lack sufficiently. rich semantic that would be necessary to provide meaningful explanations of the. diagram Therefore the most challenging part is to enrich this representation. with sufficient semantic meaning to allow the automatic generation of diagram. descriptions that emulate human reading behaviour in its different facets such. as taking a casual glance at a drawing getting an initial abstract overview of its. components before diving deeper into single components. In our semantic enrichment we analyse the graph representing the molecule. structure in order to identify chemically interesting compounds such as ring. systems aliphatic chains and functional groups exploiting cheminformatics algo. rithms implemented in the Chemistry Development Kit CDK 9 This imposes. a hierarchical structure on the molecule that we can later exploit for navigation. In addition identified substructures are being automatically named using on. line web services e g 3 10 that generate common chemical names given a. specification of a compound, For the Aspirin molecule we identify three major components a Benzene ring. two functional groups Carboxylic Acid and Ester These are depicted in Fig 3. on the left Once identified these components are combined and represented in. the abstraction graph given in Fig 3 on the right and names for them as well. as for the overall molecule i e Aspirin are computed via ChemSpider 3 The. computed information is then represented as an XML structure to extend the. basic CML representation to an enriched CML format that contains the admin. istrative information for the abstraction graph as well as sufficient information. on later generating speech strings for the diagram. 2 3 Annotated SVG Generation, Already the non enriched generated CML representation of a molecule can serve. as the basis to compute the corresponding diagram as SVG Although there exist. a number of solutions for this these are exclusively geared towards rendering a. diagram discarding all chemical information in the process That is they will set. all the geometric components lines and characters in a flat structure losing in. formation about bonds or atoms As making a connection between the geometric. component of the SVG and the bonds and atoms in the input CML file is im. portant for the purpose of highlighting and magnification we have implemented. our own SVG renderer It exploits SVG facilities to group elements together as. well as to add attributes reflecting their chemical purpose and connecting them. to their origins in CML,3 Web Integration and Front End. The SVG resulting from the recognition process can directly be included into the. rendered page However we also want to exploit the abstraction graph structure. to overlay the SVG with a navigation model to enable users to explore diagrams. interactively Unfortunately this is not doable by embedding the navigation. structure into the SVG alone as SVG is a tree structure while the abstrac. tion graph is a hierarchical graph with shared elements Consequently we need. this structure independently in the web page and connect it to the SVG via. JavaScript functionality, More technically we employ AJAX to import the SVG together with the se.
mantically enriched chemical information as an SVG XML media type into the. web page Some injected JavaScript code then enables interactive exploration of. diagrams The main idea is that a user can enter a diagram and interactively. browse through its components on different levels and in different granularity. The components are presented to the reader by making descriptions available for. aural rendering by a screen reader through pushing text strings into a ARIA live. region Parts of the molecule structure can be focused both by highlighting and. optionally via magnification These functions are implemented via CSS changes. and moving the SVG viewport respectively All interactions and voicing oper. ations are thus implemented browser screen reader and platform independent. exploiting HTML5 CSS and WAI ARIA standards, Considering again our example molecule Aspirin its. CML structure allows us to generate an SVG diagram. that can be imported into any modern web browser, On the right is an image of the SVG diagram already. highlighted on the top molecule level that corresponds. to the entire Aspirin molecule When browsing the, molecule highlighting is adjusted via CSS and focused. parts are magnified using the SVG viewport, Browsing the molecule diagram allows us to move ver. tically between the different levels of the abstraction. graph as well as horizontally between nodes on a single. level of the graph For example one can move from the. top level Aspirin molecule down to the major compo. nent level and around this level The image on the right. depicts a move on the major component level from the. Benzene ring to the functional group Carboxylic Acid. This step is voiced as Benzene ring with Carboxylic. Acid at substitution 1,4 Polyfilling Diagrams on the Web.
Polyfills are a technology that aims to mask the discrepancy in provision of. content and regeneration into an annotated graphics format that makes them amenable to assistive technology Web browsing software allows readers to in

Related Books