How to use Mohea?
Mohea is a tool for creating fully accessible HTML menus, forms and tables.
To create and export a project you must create an account. You can choose to connect via Google, Facebook, GitHub.
Once logged in you will be able to choose what type of project you want to create from your Dashboard. This is also where you'll find the list of your saved projects. You can delete or copy an existing project.
To save a created project you will need to give it a name and click on the "Save" button.
It is possible to interact with a project with a few shortcuts:
CTRL + S to save the project
CTRL + Z to cancel the last action
CTRL + Y to return to the last action
"Undo" and "Redo" buttons are also available on each module.
A page also allows you to modify your account information (name, email, avatar).
The form creation module allows you to build an HTML form with all the elements of your choice and to generate the code in order to integrate it directly into your project.
The forms are fully accessible since they use all the navigation and reading help properties such as aria-describedby.
Adding an element
It is possible to choose the different elements to be integrated into the form In the "Add an Element" menu on the left side of the interface we find the following elements:
- Text Input
- Text Area
- Radio Button
Just click on the field to add it to the project. It will be displayed directly in the central part of the interface.
In the central part is the visual of your form. You must click on an element to give it the focus in order to be able to modify it afterwards.
Modifying an element
Once you have selected the element you want to customize, the Edit panel appears on the right side of the "Edit an Element" box.
The fields related to an element can be modified (for example: placeholder, required, label,). It is possible to duplicate an already created element, as well as to modify its position using the " Up " and " Down " buttons.
For Radio Button, CheckBox and Select elements it is possible to add one or more options by clicking on the "Add New Option" button in the element editing interface. Then choose the item to be modified in the " Edit Options " list.
It is possible to delete an element from the form, using the " Delete " button, and to completely reset the form, using the " Reset " button.
The menu creation module allows you to build a fully accessible HTML menu. It will be directly possible to integrate it into your web page.
It is possible to add or remove menu items in this way by using the "+" or "-" buttons. This is also applicable for submenus.
Editing an item
To complete a menu item just fill in the corresponding box.
A menu item is customizable, it is possible to modify several options:
- The style (Bold, Italic, Underline, font size)
- The color of the text and the Background
- The URL and title of a link
- If the link is opened in a new tab
A global style is applied to the menu, with the possibility to choose or not the Bootstrap theme, and to choose a Dark or Light style.
A " Reset " button is also used to reset the entire project.
The table creation module allows you to build and generate accessible HTML tables. It will be directly possible to integrate it into your web page.
When creating a blank table it is possible to generate a table by entering the number of rows and columns, or by importing a CSV or JSON file. These files must contain valid data to be transformed into a table.
It is also possible to create the table simply by using the add buttons :
- "Col +" and "Col -" allow you to add or delete a column.
- "Head +" and "Head -" are used to add or remove a THEAD component.
- "Body +" and "Body -" are used to add or remove a TBODY component.
- "Foot +" and "Foot -" allow you to add or remove a TFOOT component.
The merging of cells is possible with THEAD elements thanks to the "Merge" button placed under a cell.
Modify an element
The cells can be customized, it is possible to modify :
- The color of the text and the background
- Text size and alignment
- Text style (bold, italics, underlining)
A global style can be applied to the whole table :
- Bootstrap style
Import the generated code
When the table is finished, the code that has been generated is copied by clicking on the "Copy to Clipboard" button in the lower part of the interface. Don't forget to import the Bootstrap library by clicking on "Copy Bootstrap Sources" if you haven't already done so.
For any other questions, please send an email to firstname.lastname@example.org.